<template>
  <view class="container">
    <view class="bg-sear">
      <view class="scrolltop">
        <view class="section" @tap="toSearchPage">
          <image src="@/static/images/icon/search.png" class="search-img" />
          <text class="placeholder">
            搜索
          </text>
        </view>
      </view>
    </view>

    <view class="content">
      <!-- swiper -->
      <swiper :autoplay="autoplay" :indicator-color="indicatorColor" :interval="3000" :duration="duration"
        :indicator-active-color="indicatorActiveColor + ' '" :circular="true" class="pic-swiper" indicator-dots
        previous-margin="0rpx" next-margin="0rpx">
        <swiper-item>
          <view class="swiper-item">
            <image src="@/static/images/add/p1-swiper.jpg" class="banner" @tap="toProdPage"
              style="object-fit: cover; width: 100%; height: 100%;" />
          </view>
        </swiper-item>
        <swiper-item>
          <view class="swiper-item">
            <image src="@/static/images/add/p2-swiper.jpg" class="banner" @tap="toProdPage"
              style="object-fit: cover; width: 100%; height: 100%;" />
          </view>
        </swiper-item>
        <swiper-item>
          <view class="swiper-item">
            <image src="@/static/images/add/p3-swiper.jpg" class="banner" @tap="toProdPage"
              style="object-fit: cover; width: 100%; height: 100%;" />
          </view>
        </swiper-item>
      </swiper>
      <!-- <swiper :autoplay="autoplay" :indicator-color="indicatorColor" :interval="interval" :duration="duration"
        :indicator-active-color="indicatorActiveColor + ' '" :circular="true" class="pic-swiper" indicator-dots
        previous-margin="20rpx" next-margin="20rpx">
        <block>
          <swiper-item class="banner-item">
            <view class="img-box">
              <image src="@/static/images/add/p1-swiper.jpg" class="banner" @tap="toProdPage" />
              <image src="@/static/images/add/p2-swiper.jpg" class="banner" @tap="toProdPage" />
              <image src="@/static/images/add/p3-swiper.jpg" class="banner" @tap="toProdPage" />
            </view>
          </swiper-item>
        </block>
      </swiper> -->
      <!-- end swiper -->

      <view class="cat-item">
        <view class="item" data-sts="1" @tap="toClassifyPage">
          <image src="@/static/images/icon/newProd.png" />
          <text>新品推荐</text>
        </view>
        <view class="item" data-sts="1" @tap="toClassifyPage">
          <image src="@/static/images/icon/timePrice.png" />
          <text>限时特惠</text>
        </view>
        <view class="item" data-sts="3" @tap="toClassifyPage">
          <image src="@/static/images/icon/neweveryday.png" />
          <text>每日疯抢</text>
        </view>
        <view class="item" @tap="toCouponCenter">
          <image src="@/static/images/icon/newprods.png" />
          <text>领优惠券</text>
        </view>
      </view>

      <!-- 消息播放 -->
      <view class="message-play" @tap="onNewsPage">
        <image src="@/static/images/icon/horn.png" class="hornpng" />
        <swiper :vertical="true" :autoplay="true" :circular="true" duration="1000" class="swiper-cont">
          <swiper-item>111</swiper-item>
          <swiper-item>222</swiper-item>
          <swiper-item>333</swiper-item>
        </swiper>
        <text class="arrow" />
      </view>
    </view>

    <view class="updata">


      <button type="default" @click="jump">填写明细</button>
      <!-- <div style="margin: 10rpx 0;">
        <view style="height: 200rpx;width: 100%;background-color: pink;display: flex;">
          <view style="height: 100%; width: 25%;  display: flex; justify-content: center; align-items: center;">
            <img class="indexImg" src="@/static/images/add/p6.png" alt="">
          </view>
          <view style="height: 200rpx;width: 75%;background-color: wheat;">
            <view style="height: 20%;width: 100%;background-color: gainsboro;">
              <h3>产品1</h3>
            </view>
            <view style="height: 60%;width: 100%;background-color: tan;">产品描述:</view>
            <view
              style="height: 20%;width: 90%;background-color: antiquewhite;text-align: end;display: flex; align-items: center;">
              <view style="width: 100%;text-align: end;">￥价格</view>
            </view>
          </view>
        </view>
      </div> -->


      <!--   <div style="margin: 10rpx 0;">
        <view style="height: 200rpx;width: 100%;background-color: pink;display: flex;">
          <view style="height: 100%; width: 25%;  display: flex; justify-content: center; align-items: center;">
            <img class="indexImg" src="@/static/images/add/p6.png" alt="">
          </view>
          <view style="height: 200rpx;width: 75%;background-color: wheat;">
            <view style="height: 20%;width: 100%;background-color: gainsboro;">
              <h3>产品2</h3>
            </view>
            <view style="height: 60%;width: 100%;background-color: tan;">产品描述:</view>
            <view
              style="height: 20%;width: 90%;background-color: antiquewhite;text-align: end;display: flex; align-items: center;">
              <view style="width: 100%;text-align: end;">￥价格</view>
            </view>
          </view>
        </view>
      </div> -->



      <!--      <div style="margin: 10rpx 0;">
        <view style="height: 200rpx;width: 100%;background-color: pink;display: flex;">
          <view style="height: 100%; width: 25%;  display: flex; justify-content: center; align-items: center;">
            <img class="indexImg" src="@/static/images/add/p6.png" alt="">
          </view>
          <view style="height: 200rpx;width: 75%;background-color: wheat;">
            <view style="height: 20%;width: 100%;background-color: gainsboro;">
              <h3>产品3</h3>
            </view>
            <view style="height: 60%;width: 100%;background-color: tan;">产品描述:</view>
            <view
              style="height: 20%;width: 90%;background-color: antiquewhite;text-align: end;display: flex; align-items: center;">
              <view style="width: 100%;text-align: end;">￥价格</view>
            </view>
          </view>
        </view>
      </div> -->









    </view>
  </view>
</template>

<script setup>
  const wxs = number()
  const indicatorColor = ref('#d1e5fb')
  const indicatorActiveColor = ref('#1b7dec')
  const autoplay = ref(true)
  const interval = ref(2000)
  const duration = ref(1000)
  const indexImgs = ref([])
  const seq = ref(0)
  const news = ref([])
  const taglist = ref([])
  const updata = ref(true)


  const jump = () => {
    console.log(11111)
    uni.navigateTo({
      url: '/pages/test/test',
      success: () => {
        console.log('跳转到测试页面成功');
      },
      fail: (err) => {
        console.error('跳转失败', err);
      }
    });

  }

  onLoad(() => {
    // getAllData()
  })
  onShow(() => {
    // #ifdef MP-WEIXIN
    uni.getSetting({
      success(res) {
        if (!res.authSetting['scope.userInfo']) {
          uni.navigateTo({
            url: '/pages/login/login'
          })
        }
      }
    })
    // #endif
    http.getCartCount() // 重新计算购物车总数量
  })

  onPullDownRefresh(() => {
    // 模拟加载
    setTimeout(() => {
      getAllData()
      uni.stopPullDownRefresh() // 停止下拉刷新
    }, 100)
  })

  const getAllData = () => {
    http.getCartCount() // 重新计算购物车总数量
    getIndexImgs()
    getNoticeList()
    getTag()
  }

  const toProdPage = (e) => {
    const prodid = e.currentTarget.dataset.prodid

    if (prodid) {
      uni.navigateTo({
        url: '/pages/prod/prod?prodid=' + prodid
      })
    }
  }
  /**
   * 加入购物车
   * @param item
   *
   *
   */
  const addToCart = (item) => {
    uni.showLoading({
      mask: true
    })
    http.request({
        url: '/prod/prodInfo',
        method: 'GET',
        data: {
          prodId: item.prodId
        }
      })
      .then(({
        data
      }) => {
        http.request({
            url: '/p/shopCart/changeItem',
            method: 'POST',
            data: {
              basketId: 0,
              count: 1,
              prodId: data.prodId,
              shopId: data.shopId,
              skuId: data.skuList[0].skuId
            }
          })
          .then(() => {
            uni.hideLoading()
            http.getCartCount() // 重新计算购物车总数量
            uni.showToast({
              title: '加入购物车成功',
              icon: 'none'
            })
          })
      })
  }

  const toCouponCenter = () => {
    uni.showToast({
      icon: 'none',
      title: '该功能未开放'
    })
  }

  /**
   * 跳转搜索页
   */
  const toSearchPage = () => {
    uni.navigateTo({
      url: '/pages/search-page/search-page'
    })
  }

  /**
   * 跳转产品活动页面
   * @param e
   */
  const toClassifyPage = (e) => {
    let url = '/pages/prod-classify/prod-classify?sts=' + e.currentTarget.dataset.sts
    const id = e.currentTarget.dataset.id
    const title = e.currentTarget.dataset.title

    if (id) {
      url += '&tagid=' + id + '&title=' + title
    }

    uni.navigateTo({
      url
    })
  }
  /**
   * 跳转公告列表页面
   */
  const onNewsPage = () => {
    uni.navigateTo({
      url: '/pages/recent-news/recent-news'
    })
  }

  /**
   * 加载轮播图
   */
  const getIndexImgs = () => {
    http.request({
        url: '/indexImgs',
        method: 'GET',
        data: {}
      })
      .then(({
        data
      }) => {
        indexImgs.value = data
        seq.value = data
      })
  }

  // const getNoticeList = () => {
  //   // 加载公告
  //   http.request({
  //       url: '/shop/notice/topNoticeList',
  //       method: 'GET',
  //       data: {}
  //     })
  //     .then(({
  //       data
  //     }) => {
  //       news.value = data
  //     })
  // }

  /**
   * 加载产品标题分组列表
   */
  // const getTag = () => {
  //   http.request({
  //       url: '/prod/tag/prodTagList',
  //       method: 'GET',
  //       data: {}
  //     })
  //     .then(({
  //       data
  //     }) => {
  //       taglist.value = data
  //       for (let i = 0; i < data.length; i++) {
  //         updata.value = false
  //         updata.value = true
  //         getTagProd(data[i].id, i)
  //       }
  //     })
  // }

  // const getTagProd = (id, index) => {
  //   http.request({
  //       url: '/prod/prodListByTagId',
  //       method: 'GET',
  //       data: {
  //         tagId: id,
  //         size: 6
  //       }
  //     })
  //     .then(({
  //       data
  //     }) => {
  //       updata.value = false
  //       updata.value = true
  //       const taglistParam = taglist.value
  //       taglistParam[index].prods = data.records
  //       taglist.value = taglistParam
  //     })
  // }
</script>

<style scoped lang="scss">
  @use './index.scss';

  .indexImg {

    width: 80%;
    height: auto;
    max-width: 100%;
  }

  .banner {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>